<template>
  <div class="com_title">
    <h3 class="com_title_h3">
      <span
        :style="{ backgroundColor: this.$store.state.app.color }"
        class="line"
      ></span>
      <slot name="title"></slot>
    </h3>
    <div class="content" v-if="isShow">
      <el-row :gutter="gutter">
        <el-col
          :xs="{
            span: item.xsSpan ? item.xsSpan : '',
            offset: item.xsOffset ? item.xsOffset : '',
          }"
          :sm="{
            span: item.smSpan ? item.smSpan : '',
            offset: item.smOffset ? item.smOffset : '',
          }"
          :md="{
            span: item.mdSpan ? item.mdSpan : '',
            offset: item.mdOffset ? item.mdOffset : '',
          }"
          :lg="{
            span: item.lgSpan ? item.lgSpan : '',
            offset: item.lgOffset ? item.lgOffset : '',
          }"
          :xl="{
            span: item.xlSpan ? item.xlSpan : '',
            offset: item.xlOffset ? item.xlOffset : '',
          }"
          :style="styleIng"
          v-for="(item, index) in formList"
          :key="index"
        >
          <div style="display: flex">
            <span class="table">{{ item.label }}</span>
            <span class="value" v-if="item.value">{{ item.value }}</span>
            <div v-else>
              <span
                v-for="(child, index1) in item.children"
                :key="index1"
                class="box_span"
              >
                <div>
                  <span class="table">{{ child.label }}</span>
                  <span class="value" v-if="child.value">{{
                    child.value
                  }}</span>
                </div>
                <div>
                  <template
                    v-if="child.children ? child.children.length : false"
                  >
                    <div v-for="(ele, index2) in child.children" :key="index2">
                      <span class="table">{{ ele.label }}</span>
                      <span class="value">{{ ele.value }}</span>
                      <br />
                    </div>
                  </template>
                </div>
                <br />
              </span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <slot name="table"></slot>
  </div>
</template>

<script>
export default {
  props: {
    formList: {
      type: [Object, Array],
      default: () => {},
    },
    styleIng: {
      type: Object,
      default: {},
    },
    isShow: {
      type: Boolean,
      default: true,
    },
    gutter: {
      type: Number,
      default: 0,
    },
    color: {
      type: String,
      default: "#1E90FF",
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.com_title {
  .com_title_h3 {
    margin: 0;
    display: inline-block;
    line-height: 2;
    font-weight: 800;
    font-size: 22px;
    .line {
      width: 2px;
      height: 14px;
      display: inline-block;
      margin-right: 1px;
    }
  }

  .content {
    .table {
      font-size: 16px;
      font-weight: 500;
      color: #000;
    }
    .value {
      font-size: 15px;
      font-weight: 500;
      color: #000;
    }
    .box_span {
      display: block;
      margin-bottom: 20px;
      display: flex;
      align-items: flex-start;
    }
  }
}
</style>